<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			span {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: white;
				display: inline-block;
				text-align: center;
				margin: 6px 15px;
			}
			
			.spanover {
				background: red;
			}
			
			.spanout {
				background: white;
			}
			
			.navnum {
				width: 350px;
				height: 30px;
				background: rgba(0, 0, 0, 0.3);
				text-align: center;
				border-radius: 15px;
				position: absolute;
				left: 220px;
				top: 300px;
			}
			/*	img{
				display: none;
			}*/
			
			.leftdiv {
				width: 50px;
				height: 100px;
				background: rgba(0, 0, 0, 0.3);
				position: absolute;
				left: 0px;
				top: 120px;
				display: none;
			}
			
			.rightdiv {
				width: 50px;
				height: 100px;
				background: rgba(0, 0, 0, 0.3);
				position: absolute;
				left: 740px;
				top: 120px;
				display: none;
			}
			
			.rightbut {
				position: absolute;
				left: 760px;
				top: 160px;
				color: white;
				cursor: pointer;
				display: none;
			}
			
			.leftbut {
				position: absolute;
				left: 20px;
				top: 160px;
				color: white;
				cursor: pointer;
				display: none;
			}
			
			.imgs {
				position: relative;
			}
		</style>
	</head>

	<body onload="initImgPlay()">
		<div class="main">
			<div class="imgs">
				<img src="img/1.jpg" onmouseover="stopPlay()" onmouseout="startPlay()" />
				<img src="img/2.jpg" onmouseover="stopPlay()" onmouseout="startPlay()" />
				<img src="img/3.jpg" onmouseover="stopPlay()" onmouseout="startPlay()" />
				<img src="img/4.jpg" onmouseover="stopPlay()" onmouseout="startPlay()" />
				<img src="img/5.jpg" onmouseover="stopPlay()" onmouseout="startPlay()" />
			</div>
			<div class="leftdiv" onmouseover="stopPlay()" onmouseout="startPlay()" onclick="leftBut()"></div>
			<div class="leftbut" onmouseover="stopPlay()" onmouseout="startPlay()" onclick="leftBut()">
				<</div>
					<div class="rightdiv" onmouseover="stopPlay()" onmouseout="startPlay()" onclick="rightBut()"></div>
					<div class="rightbut" onmouseover="stopPlay()" onmouseout="startPlay()" onclick="rightBut()">></div>
					<div class="navnum">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
			</div>
	</body>
	<script type="text/javascript">
		var count = 0;
		var imgs = document.getElementsByTagName("img");
		var nums = document.getElementsByTagName("span");
		function initImgPlay() {

			imgs[count].style.display = "block";
			nums[count].className = "spanover";
			for(var i = 0; i < imgs.length; i++) {
				if(count != i) {
					imgs[i].style.display = "none";
					nums[i].className = "spanout";
				}
				//count ++;
			}
			
			if(count == 4) {
				count = 0;
			}else{
				count++;
			}
		}
		var play = setInterval("initImgPlay()", 1000);

		function stopPlay() {
			document.getElementsByClassName("leftdiv")[0].style.display="block";
			document.getElementsByClassName("leftbut")[0].style.display="block";
			document.getElementsByClassName("rightdiv")[0].style.display="block";
			document.getElementsByClassName("rightbut")[0].style.display="block";
			clearInterval(play);
		}

		function startPlay() {
			document.getElementsByClassName("leftdiv")[0].style.display="none";
			document.getElementsByClassName("leftbut")[0].style.display="none";
			document.getElementsByClassName("rightdiv")[0].style.display="none";
			document.getElementsByClassName("rightbut")[0].style.display="none";
			play = setInterval("initImgPlay()", 1000);
		}

		function leftBut() {
			clearInterval(play);
			if(count == 0){
				count = 4;
			}else{
				count--;
			}
			if(count == 0) {
				count = 4;
			}else if(count){
				count--;
			}
			imgs[count].style.display = "block";
			nums[count].className = "spanover";
			initImgPlay();
		}
		
		function rightBut() {
			clearInterval(play);
			imgs[count].style.display = "block";
			nums[count].className = "spanover";
			initImgPlay();
		}
	</script>

</html>